<template>
	<div>
		 <div class="pagination-container" style="margin-top: 16px; text-align: right;">
		      <el-pagination
		        v-model:current-page="currentPage"
		        v-model:page-size="pageSize"
		        :total="total"
		        :page-sizes="[10, 15, 20, 30]"
		        :small="false"
		        :disabled="false"
		        :background="true"
		        layout="total, sizes, prev, pager, next, jumper"
		        @current-change="changeCurrentPage"
		        @size-change="changeCurrentPage"/>
		    </div>
	</div>
</template>

<script setup>
	// ... existing code ...
	import { ref } from "vue";
  const emit = defineEmits(['query:page']);
	// 分页相关参数
	const currentPage = ref(1); // 当前页码
	const pageSize = ref(10);   // 每页条数
	const total = ref(100);       // 总记录数
	// 页码改变事件
	const changeCurrentPage = (page) => {
	  currentPage.value = page;
	emit('query:page', { current: currentPage.value, size: pageSize.value });
	};
	// 每页条数改变事件
	const changePageSize = (size) => {
	  pageSize.value = size;
	  currentPage.value = 1; // 重置为第一页
		emit('query:page', { current: currentPage.value, size: pageSize.value });
	};
	defineExpose({currentPage,pageSize,total});
</script>

<style scoped>
</style>